<template>
  <div>
    <p>eat: {{obj.hobby.eat}}</p>
    <button @click="obj.hobby.eat = '🍜'">修改 eat</button>
    <button @click="obj = { hobby: { eat: '🍜' } }">修改 eat</button>
  </div>
</template>

<script>
import { reactive, watch  } from 'vue'
export default {
  setup() {
    const obj = reactive({
      name: 'ifer',
      hobby: {
        eat: '西瓜',
      },
    })
    // !#3 当 watch 监听 reactive 数据的时候，其实本质上是对其【内部数据的监听】，对这个 reactive 数据本身的修改是不会触发监听的
    watch(obj, (newValue, oldValue) => {
      // !#1 watch 监听 reactive 对象的时候，新旧值相等
      console.log(newValue === oldValue)
    }, {
      deep: false // !#2 watch 监听 reactive，强制开启了深度监听，改都该改不了
    })
    return {obj}
  }
}
</script>

<style lang="scss" scoped></style>